import React from 'react';
import { Container, Typography, Box, Paper, Stepper, Step, StepLabel, StepContent, Button } from '@mui/material';

const steps = [
  {
    label: '评估当前状况',
    description: '记录您的日常生活习惯，包括用电、用水、交通方式等。',
  },
  {
    label: '设定环保目标',
    description: '根据评估结果，设定具体可实现的环保目标。',
  },
  {
    label: '制定具体计划',
    description: '将目标分解为每日/每周可执行的具体行动。',
  },
  {
    label: '执行与记录',
    description: '按计划执行并记录进展，定期回顾和调整。',
  },
];

function ActionPlan() {
  const [activeStep, setActiveStep] = React.useState(0);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <Container maxWidth="md">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" gutterBottom>
          个性化行动计划
        </Typography>
        <Paper sx={{ p: 3 }}>
          <Stepper activeStep={activeStep} orientation="vertical">
            {steps.map((step, index) => (
              <Step key={step.label}>
                <StepLabel>{step.label}</StepLabel>
                <StepContent>
                  <Typography>{step.description}</Typography>
                  <Box sx={{ mb: 2 }}>
                    <div>
                      <Button
                        variant="contained"
                        onClick={handleNext}
                        sx={{ mt: 1, mr: 1 }}
                      >
                        {index === steps.length - 1 ? '完成' : '下一步'}
                      </Button>
                      <Button
                        disabled={index === 0}
                        onClick={handleBack}
                        sx={{ mt: 1, mr: 1 }}
                      >
                        返回
                      </Button>
                    </div>
                  </Box>
                </StepContent>
              </Step>
            ))}
          </Stepper>
          {activeStep === steps.length && (
            <Paper square elevation={0} sx={{ p: 3 }}>
              <Typography>所有步骤已完成</Typography>
              <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
                重新开始
              </Button>
            </Paper>
          )}
        </Paper>
      </Box>
    </Container>
  );
}

export default ActionPlan; 